<template>
  <div class="mt-32">
    <div class="card-box box-shadow-ed py-32">
      <div class="date-type">
        <div :class="selectDate == '1' && 'select'" @click="changeDate(1)">
          日
        </div>
        <div :class="selectDate == '2' && 'select'" @click="changeDate(2)">
          周
        </div>
        <div :class="selectDate == '3' && 'select'" @click="changeDate(3)">
          月
        </div>
      </div>
      <div class="tip">分类对比</div>
      <!-- <van-cell class="date1" title="" :value="date" @click="show = true" />
      <van-calendar
        allow-same-day
        v-model:show="show"
        type="range"
        @confirm="onConfirm"
        :min-date="new Date(2010, 0, 1)"
      /> -->
      <div class="card-list">
        <div>
          <div>{{ detail.serviceNum }}</div>
          <div>服务次数</div>
        </div>
        <div>
          <div>{{ detail.servicePersonNum }}</div>
          <div>服务人次</div>
        </div>
        <div class="package">
          <div>套餐分布</div>
          <div class="d-flex flex-column grid-gap10">
            <div v-for="item in detail.packageList" :key="item.name">
              {{ item.name }}:{{ item.num }}
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- <div class="card-box box-shadow-ed py-24">
      <div class="date-type">
        <div :class="selectDate == '1' && 'select'" @click="changeDate(1)">
          日
        </div>
        <div :class="selectDate == '2' && 'select'" @click="changeDate(2)">
          周
        </div>
        <div :class="selectDate == '3' && 'select'" @click="changeDate(3)">
          月
        </div>
      </div>

      <div class="bar-box">
        <Gecharts :options="barOptions" class="w-100 h-100"></Gecharts>
      </div>
    </div>
    <div class="card-box box-shadow-ed pie-box">
      <Gecharts :options="barOptions" class="w-100 h-100"></Gecharts>
    </div> -->
  </div>
</template>

<script setup>
import { onMounted } from "vue";
import { handlerData as handlerBarData } from "../charts/bar-options.js";
import {
  postBusinessClassContrast,
  postBusinessServiceTrends,
} from "@/api/index";
import { useDateRange } from "@/hooks/useDateRange";
import moment from "moment";
const selectDate = ref(1);
const currentTime = ref([
  moment(new Date()).startOf("day").format("YYYY-MM-DD HH:mm:ss"),
  moment(new Date()).endOf("day").format("YYYY-MM-DD HH:mm:ss"),
]);
const changeDate = (val) => {
  selectDate.value = val;
  const dateType = dateObj[selectDate.value];
  console.log("dateType", dateType);
  currentTime.value = [
    moment(new Date()).startOf(dateType).format("YYYY-MM-DD HH:mm:ss"),
    moment(new Date()).endOf(dateType).format("YYYY-MM-DD HH:mm:ss"),
  ];
  getContrast();
};
const dateObj = {
  1: "day",
  2: "week",
  3: "month",
};

// const { show, startTimeVal, endTimeVal, onConfirm, date } = useDateRange();
const detail = ref({
  serviceNum: "",
  servicePersonNum: "",
  packageList: [],
});
const barOptions = ref({});

onMounted(() => {
  getContrast();
  // getServiceTrends();
});
const getContrast = () => {
  postBusinessClassContrast({
    startTime: currentTime.value[0],
    endTime: currentTime.value[1],
  }).then((res) => {
    detail.value = res.data;
  });
};
const { show, startTimeVal, endTimeVal, onConfirm, date } =
  useDateRange(getContrast);

const getServiceTrends = () => {
  const params = {
    endTime: endTimeVal.value,
    startTime: startTimeVal.value,
  };
  postBusinessServiceTrends(params).then((res) => {
    barOptions.value = handlerBarData(res.data);
  });
};
</script>

<style lang="less" scoped>
.card-box {
  border-radius: 20px;
  margin: 0 30px;
  background: #fff;
  margin-bottom: 36px;
  position: relative;
  .date-type {
    position: absolute;
    top: 0;
    left: 0;
    font-size: 28px;
    display: flex;
    z-index: 9;
    > div {
      width: 55px;
      height: 65px;
      text-align: center;
      line-height: 65px;
      border: 1px solid #000;
      border-left: none;
      &:first-child {
        border-left: 1px solid #000;
      }
      &.select {
        background: #000;
        color: #fff;
      }
    }
  }
  .tip {
    font-size: 34px;
    font-weight: 600;
    text-align: center;
    margin-bottom: 24px;
    position: relative;
    // z-index: 2;
  }

  .date1 {
    position: absolute;
    top: 0.42667rem;
    right: 0.42667rem;
    padding: 0;
    /* left: 0; */
    display: inline-block;
    width: auto;
    &::after {
      display: none;
    }
  }
}
.card-list {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  padding: 0 30px;
  gap: 30px;
  > div {
    background: #fff;
    // border-radius: 15px;
    padding: 40px 0 20px;
    height: 200px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 10px #ededed;
    &:not(.package) {
      > div:first-child {
        color: #f8b62b;
        font-size: 42px;
        font-weight: 600;
        margin-bottom: 24px;
      }
      > div:last-child {
        color: #f8b62b;
        font-size: 24px;
      }
    }
    &.package {
      display: flex;
      // justify-content: space-around;
      padding: 0;
      color: #f8b62b;
      font-size: 26px;
      > div:first-child {
        font-size: 32px;
        margin-bottom: 20px;
      }
    }
  }
}
.bar-box {
  height: 500px;
}
.pie-box {
  height: 500px;
  background: #fff;
}
</style>
